<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>设备列表 - 御物联</title>
    <style>
        *{margin:0;padding:0;box-sizing:border-box}
        :root{--primary:#409EFF;--stage-bg:#EDE3D3;--bg:#F5F7FA;--text:#303133;--subtext:#909399;--card:#FFFFFF;--border:#EBEEF5;--ok:#67C23A;--warn:#E6A23C;--danger:#F56C6C}
        body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;background:var(--stage-bg);color:var(--text)}
        .page{min-height:100vh;max-width:480px;margin:0 auto;background:var(--bg);padding-bottom:calc(72px + env(safe-area-inset-bottom))}
        /* 页头样式与页脚保持一致 */
        .header-box{position:sticky;top:0;z-index:20;background:var(--card);border-bottom:1px solid var(--border);box-shadow:0 -2px 8px rgba(0,0,0,.04);padding:12px;display:flex;justify-content:space-between;align-items:center;margin:0;border-radius:0}
        .header-box > *:first-child{ flex-shrink:0; }
        .project-select-btn{ padding:0 28px 0 14px; height:32px; border-radius:16px; background:var(--card); border:1px solid var(--border); display:inline-flex; align-items:center; gap:0; color:var(--text); box-shadow:0 1px 3px rgba(0,0,0,.03); cursor:pointer; font-size:14px; transition:all 0.2s; white-space:nowrap; width:160px; overflow:hidden; position:relative; flex-shrink:0; }
        .project-select-btn:hover{ background:var(--bg); border-color:var(--primary); color:var(--primary); }
        .project-select-btn::after{ content:'▼'; font-size:10px; position:absolute; right:10px; top:50%; transform:translateY(-50%); flex-shrink:0; z-index:2; background:var(--card); padding:0 2px; }
        .project-select-btn:hover::after{ background:var(--bg); }
        .project-select-btn span{ white-space:nowrap; display:block; overflow:hidden; text-overflow:ellipsis; max-width:calc(100% - 20px); position:relative; z-index:1; }
        .back-btn{padding:0 12px;height:32px;border-radius:16px;background:var(--card);border:1px solid var(--border);display:flex;align-items:center;gap:6px;color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.03);cursor:pointer;font-size:14px;transition:all 0.2s}
        .back-btn:hover{background:var(--bg);border-color:var(--primary);color:var(--primary)}
        .back-btn::before{content:'←';font-size:16px;line-height:1}
        .toolbar{display:flex;justify-content:flex-end;gap:10px;padding:12px 12px 8px;position:sticky;top:0;background:linear-gradient(180deg, rgba(245,247,250,1) 70%, rgba(245,247,250,0));z-index:10;align-items:center}
        .user{padding:0 10px;height:32px;border-radius:16px;background:var(--card);border:1px solid var(--border);display:flex;align-items:center;gap:8px;color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.03); margin-left:auto; }
        .user-avatar{width:22px;height:22px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px}
        .select{flex:1;height:44px;border:1px solid var(--border);border-radius:10px;background:var(--card);padding:0 12px;color:var(--text);font-size:14px}
        /* Tab容器样式 */
        .tab-container{margin:16px 12px 0;background:var(--card);border-radius:8px;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.03)}
        .tab-content{padding:16px}
        
        .filters{display:flex;gap:10px;padding:16px 12px 10px}
        .filter-select{height:36px;border:1px solid var(--border);border-radius:6px;background:var(--card);padding:0 12px;color:var(--text);font-size:14px;min-width:100px}
        .search-input{flex:1;height:36px;border:1px solid var(--border);border-radius:6px;background:var(--card);padding:0 12px;color:var(--text);font-size:14px;min-width:120px}
        .btn-primary{height:36px;padding:0 12px;border-radius:6px;border:none;background:var(--primary);color:#fff;font-size:14px;white-space:nowrap}
        .btn-plain{height:36px;padding:0 12px;border-radius:6px;border:1px solid var(--border);background:#fff;color:var(--text);font-size:14px;white-space:nowrap}
        .filter-row{display:flex;gap:8px;padding:0 12px 8px;flex-wrap:wrap;align-items:center}
        .filter-row.single{justify-content:flex-start}
        .button-row{display:flex;gap:8px;padding:0 12px 10px;justify-content:flex-end}
        
        .grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 12px 12px}
        .card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px;box-shadow:0 2px 6px rgba(0,0,0,.03)}
        .device-title{color:#3b82f6;font-weight:600}
        .tag{display:inline-block;background:#E1F3D8;color:#67C23A;border-radius:6px;padding:2px 8px;margin-left:8px;font-size:12px}
        .btn-mini{display:inline-block;margin-top:8px;background:#ecf5ff;color:#409EFF;border-radius:6px;padding:4px 10px;font-size:12px;border:1px solid #d9ecff}
        
        .footer{position:fixed;left:0;right:0;bottom:0;height:60px;padding-bottom:env(safe-area-inset-bottom);background:var(--card);border-top:1px solid var(--border);display:flex;box-shadow:0 -2px 8px rgba(0,0,0,.04);max-width:480px;margin:0 auto;z-index:100}
        .tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--subtext);font-size:13px;text-decoration:none}
        .tab.active{color:var(--primary);font-weight:600}
        .tab .dot{width:6px;height:6px;border-radius:50%;background:transparent;margin-top:4px}
        .tab.active .dot{background:var(--primary)}
        /* 抽屉复用 */
        .drawer-mask{position:fixed;inset:0;background:rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:999}
        .drawer-mask.open{opacity:1;pointer-events:auto}
        .drawer{position:fixed;top:0;right:0;height:100vh;width:86vw;max-width:420px;background:var(--card);border-left:1px solid var(--border);box-shadow:-12px 0 24px rgba(0,0,0,.12);transform:translateX(100%);transition:transform .25s ease;z-index:1000;display:flex;flex-direction:column}
        .drawer.open{transform:translateX(0)}
        .drawer-header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border);font-weight:600}
        .drawer-body{padding:0 14px 14px;color:var(--subtext);font-size:14px;overflow:auto}
        .drawer-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border);color:var(--text)}
        .drawer-row:last-child{border-bottom:none}
        .drawer-foot{display:flex;gap:10px;padding:12px;background:var(--bg);border-top:1px solid var(--border)}
        .btn{height:40px;border-radius:10px;border:1px solid var(--border);background:#fff;color:var(--text);flex:1}
        .btn-danger{background:#F56C6C;color:#fff;border:none}
        
        /* 修改密码模态框样式 */
        .password-modal{ position:fixed; inset:0; background:rgba(0,0,0,.5); display:none; align-items:center; justify-content:center; z-index:2000; }
        .password-modal.open{ display:flex; }
        .password-dialog{ background:var(--card); border-radius:12px; padding:20px; width:90%; max-width:400px; box-shadow:0 8px 32px rgba(0,0,0,.2); }
        .password-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
        .password-title{ font-size:18px; font-weight:600; color:var(--text); }
        .password-close{ background:none; border:none; font-size:24px; color:var(--subtext); cursor:pointer; }
        .password-form{ display:block; }
        .form-group{ margin-bottom:16px; }
        .form-label{ display:block; margin-bottom:6px; color:var(--text); font-size:14px; font-weight:500; }
        .form-input{ width:100%; height:40px; border:1px solid var(--border); border-radius:8px; padding:0 12px; font-size:14px; color:var(--text); background:var(--card); }
        .form-input:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 2px rgba(64,158,255,.2); }
        .password-actions{ display:flex; gap:12px; margin-top:20px; }
        .btn-submit{ flex:1; height:40px; background:var(--primary); color:#fff; border:none; border-radius:8px; font-size:14px; cursor:pointer; }
        .btn-cancel{ flex:1; height:40px; background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:8px; font-size:14px; cursor:pointer; }
        .error-message{ color:var(--danger); font-size:12px; margin-top:4px; }
        
        /* 项目选择列表样式 */
        .project-list-item{
            padding:14px 16px; background:var(--bg); border-radius:10px; border:1px solid var(--border);
            margin-bottom:10px; cursor:pointer; transition:background .2s, border-color .2s;
        }
        .project-list-item:hover{ background:rgba(64,158,255,.08); border-color:var(--primary); }
        .project-list-item.selected{ background:rgba(64,158,255,.12); border-color:var(--primary); }
        .project-list-name{ font-size:15px; font-weight:600; color:var(--text); margin-bottom:4px; }
        .project-list-short{ font-size:12px; color:var(--subtext); }
        
        /* 项目选择弹窗样式 */
        .project-modal{ position:fixed; inset:0; background:rgba(0,0,0,.45); opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:2000; }
        .project-modal.open{ opacity:1; pointer-events:auto; }
        .project-dialog{ position:fixed; top:50%; left:50%; transform:translate(-50%, -48%) scale(.92); background:var(--card); border-radius:16px; width:88vw; max-width:420px; box-shadow:0 18px 40px rgba(31,45,61,.28); transition:transform .25s ease; }
        .project-modal.open .project-dialog{ transform:translate(-50%, -50%) scale(1); }
        .project-header{ padding:20px 20px 0; display:flex; align-items:center; justify-content:space-between; }
        .project-title{ font-size:18px; font-weight:700; color:var(--text); }
        .project-close{ width:28px; height:28px; border:none; background:none; font-size:20px; color:var(--subtext); cursor:pointer; }
        .project-body{ padding:18px 20px 12px; max-height:400px; overflow-y:auto; }
        .project-footer{ padding:0 20px 20px; display:flex; gap:12px; }
        .project-btn{ flex:1; height:42px; border-radius:12px; border:1px solid var(--border); background:var(--bg); color:var(--text); font-size:15px; cursor:pointer; }
        
    </style>
</head>
<body>
    <div class="page">
        <!-- 白色吸顶框包含用户信息 -->
        <div class="header-box">
            <button class="project-select-btn" id="projectSelectBtn" type="button" title="选择项目">
                <span id="projectSelectText">物测</span>
            </button>
            <button class="user" id="userBtn" type="button" title="查看个人信息">
                <span class="user-avatar" id="userAvatar">U</span>
                <span id="userName">用户</span>
            </button>
        </div>

        <!-- 设备信息 -->
        <div class="tab-container">
            <div class="tab-content active" id="device-tab">
                <!-- 状态筛选 -->
                <div class="filters">
                    <select class="filter-select" id="deviceStatusSelect" style="flex:1; min-width:120px;">
                        <option value="">全部设备</option>
                        <option value="normal">启用</option>
                        <option value="disabled">禁用</option>
                    </select>
                    <select class="filter-select" id="deviceOnlineSelect" style="flex:1; min-width:120px;">
                        <option value="">全部设备</option>
                        <option value="online">在线</option>
                        <option value="offline">离线</option>
                    </select>
                </div>
                
                <!-- 设备名称输入框 -->
                <div class="filters">
                    <input class="search-input" placeholder="请输入设备名称" id="deviceNameInput" style="width:100%;"/>
                </div>

                <!-- 设备卡片列表 -->
                <div class="grid">
                    <div class="card device-card" data-device-id="1" data-device-name="供暖" data-online="online" data-status="enabled">
                        <div class="device-title">供暖 <span class="tag">在线</span></div>
                        <a class="btn-mini">禁用</a>
                    </div>
                    <div class="card device-card" data-device-id="2" data-device-name="插座电源" data-online="offline" data-status="enabled">
                        <div class="device-title">插座电源 <span class="tag" style="background:#ffe9e6;color:#F56C6C">离线</span></div>
                        <a class="btn-mini">禁用</a>
                    </div>
                    <div class="card device-card" data-device-id="3" data-device-name="电动窗帘" data-online="online" data-status="enabled">
                        <div class="device-title">电动窗帘 <span class="tag">在线</span></div>
                        <a class="btn-mini">禁用</a>
                    </div>
                    <div class="card device-card" data-device-id="4" data-device-name="门禁" data-online="offline" data-status="enabled">
                        <div class="device-title">门禁 <span class="tag" style="background:#ffe9e6;color:#F56C6C">离线</span></div>
                        <a class="btn-mini">禁用</a>
                    </div>
                    <div class="card device-card" data-device-id="5" data-device-name="空调开关" data-online="online" data-status="enabled">
                        <div class="device-title">空调开关 <span class="tag">在线</span></div>
                        <a class="btn-mini">禁用</a>
                    </div>
                    <div class="card device-card" data-device-id="6" data-device-name="4g节点测试" data-online="offline" data-status="enabled">
                        <div class="device-title">4g节点测试 <span class="tag" style="background:#ffe9e6;color:#F56C6C">离线</span></div>
                        <a class="btn-mini">禁用</a>
                    </div>
                    <div class="card device-card" data-device-id="7" data-device-name="烟雾传感器" data-online="online" data-status="disabled">
                        <div class="device-title">烟雾传感器 <span class="tag" style="background:#ffe9e6;color:#F56C6C">禁用</span></div>
                        <a class="btn-mini">启用</a>
                    </div>
                    <div class="card device-card" data-device-id="8" data-device-name="温湿度计" data-online="offline" data-status="disabled">
                        <div class="device-title">温湿度计 <span class="tag" style="background:#ffe9e6;color:#F56C6C">禁用</span></div>
                        <a class="btn-mini">启用</a>
                    </div>
                    <div class="card device-card" data-device-id="9" data-device-name="智能插座" data-online="online" data-status="disabled">
                        <div class="device-title">智能插座 <span class="tag" style="background:#ffe9e6;color:#F56C6C">禁用</span></div>
                        <a class="btn-mini">启用</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 抽屉与遮罩（复用系统页） -->
    <div class="drawer-mask" id="drawerMask"></div>
    <aside class="drawer" id="userDrawer" aria-label="个人信息">
        <div class="drawer-header"><span>个人信息</span></div>
        <div class="drawer-body">
            <div class="drawer-row" style="padding:20px 0 12px; text-align:center;">
                <button id="userInfoBtn" class="btn btn-primary" style="width:100%; height:48px; font-size:16px;">查看个人信息</button>
            </div>
            <div class="drawer-row" style="border-bottom:none; padding:12px 0 20px; text-align:center;">
                <button id="controlPanelBtn" class="btn" style="width:100%; height:48px; font-size:16px; background:var(--ok); color:#fff; border-color:var(--ok);">操作面板展示</button>
            </div>
        </div>
        <div class="drawer-foot">
            <button id="changePasswordBtn" class="btn" style="flex:1; background:var(--primary); color:#fff; border:none;">修改密码</button>
            <button id="logoutBtn" class="btn btn-danger">退出登录</button>
            <button id="closePanel" class="btn">关闭</button>
        </div>
    </aside>

    <!-- 项目选择弹窗 -->
    <div class="project-modal" id="projectSelectModal">
        <div class="project-dialog">
            <div class="project-header">
                <div class="project-title">选择项目</div>
                <button class="project-close" data-close="projectSelectModal">×</button>
            </div>
            <div class="project-body">
                <div id="projectSelectList">
                    <!-- 动态生成的项目列表 -->
                </div>
            </div>
            <div class="project-footer">
                <button class="project-btn" data-close="projectSelectModal">取消</button>
            </div>
        </div>
    </div>

    <!-- 修改密码模态框 -->
    <div class="password-modal" id="passwordModal">
        <div class="password-dialog">
            <div class="password-header">
                <span class="password-title">修改密码</span>
                <button class="password-close" id="passwordClose">&times;</button>
            </div>
            <form class="password-form" id="passwordForm">
                <div class="form-group">
                    <label class="form-label" for="currentPassword">当前密码</label>
                    <input type="password" class="form-input" id="currentPassword" placeholder="请输入当前密码" required>
                    <div class="error-message" id="currentPasswordError"></div>
                </div>
                <div class="form-group">
                    <label class="form-label" for="newPassword">新密码</label>
                    <input type="password" class="form-input" id="newPassword" placeholder="请输入新密码" required>
                    <div class="error-message" id="newPasswordError"></div>
                </div>
                <div class="form-group">
                    <label class="form-label" for="confirmPassword">确认新密码</label>
                    <input type="password" class="form-input" id="confirmPassword" placeholder="请再次输入新密码" required>
                    <div class="error-message" id="confirmPasswordError"></div>
                </div>
                <div class="password-actions">
                    <button type="button" class="btn-cancel" id="passwordCancel">取消</button>
                    <button type="submit" class="btn-submit">确认修改</button>
                </div>
            </form>
        </div>
    </div>

    <nav class="footer">
        <a class="tab" href="system-overview.html">
            <span>首页</span>
            <span class="dot"></span>
        </a>
        <a class="tab active" href="device-list.html" aria-current="page">
            <span>设备</span>
            <span class="dot"></span>
        </a>
        <a class="tab" href="alarm-list.html">
            <span>告警</span>
            <span class="dot"></span>
        </a>
    </nav>

    <script>
        // 用户显示初始化
        (function(){
            const u = JSON.parse(localStorage.getItem('currentUser')||'{}');
            document.getElementById('userName').textContent = u.name || '用户';
            document.getElementById('userAvatar').textContent = (u.name||'U').slice(0,1);
        })();
        
        // 项目选择功能
        (function(){
            const STORAGE_KEY = 'selectedProject';
            const projectSelectBtn = document.getElementById('projectSelectBtn');
            const projectSelectText = document.getElementById('projectSelectText');
            const projectSelectModal = document.getElementById('projectSelectModal');
            const projectSelectList = document.getElementById('projectSelectList');
            
            // 项目数据（名称和简称，简称应为四字或五字，如果没有简称则显示全称）
            const projects = [
                { id: '1', name: '物联网内部测试系统', short: '物联网测试系统' },
                { id: '2', name: '智慧园区示范点', short: '智慧园区示范' },
                { id: '3', name: '城市水务试点', short: '城市水务试点' },
                { id: '4', name: '智能办公大楼物联网控制系统' } // 没有简称，将显示全称
            ];
            
            // 获取当前选中的项目
            function getSelectedProject(){
                const saved = localStorage.getItem(STORAGE_KEY);
                if(saved){
                    try{
                        const selected = JSON.parse(saved);
                        return projects.find(p => p.id === selected.id) || projects[0];
                    }catch(e){
                        console.error('解析项目数据失败', e);
                    }
                }
                return projects[0]; // 默认第一个
            }
            
            // 保存选中的项目
            function saveSelectedProject(project){
                localStorage.setItem(STORAGE_KEY, JSON.stringify({ id: project.id }));
            }
            
            // 更新显示文本
            function updateDisplayText(){
                const selected = getSelectedProject();
                // 如果有简称则显示简称，否则显示全称（即使显示不全也可以）
                projectSelectText.textContent = selected.short || selected.name;
            }
            
            // 渲染项目列表
            function renderProjectList(){
                const selected = getSelectedProject();
                projectSelectList.innerHTML = '';
                
                projects.forEach(project => {
                    const item = document.createElement('div');
                    item.className = 'project-list-item';
                    if(project.id === selected.id){
                        item.classList.add('selected');
                    }
                    
                    item.innerHTML = `
                        <div class="project-list-name">${project.name}</div>
                        <div class="project-list-short">${project.short ? `简称：${project.short}` : '（无简称，显示全称）'}</div>
                    `;
                    
                    item.addEventListener('click', () => {
                        saveSelectedProject(project);
                        updateDisplayText();
                        renderProjectList();
                        closeProjectModal();
                        // 这里可以添加项目切换后的其他逻辑
                    });
                    
                    projectSelectList.appendChild(item);
                });
            }
            
            // 打开/关闭弹窗
            function openProjectModal(){
                renderProjectList();
                projectSelectModal.classList.add('open');
            }
            
            function closeProjectModal(){
                projectSelectModal.classList.remove('open');
            }
            
            // 事件监听
            projectSelectBtn.addEventListener('click', openProjectModal);
            
            // 关闭弹窗按钮
            document.querySelectorAll('[data-close="projectSelectModal"]').forEach(btn => {
                btn.addEventListener('click', closeProjectModal);
            });
            
            // 点击遮罩关闭弹窗
            projectSelectModal.addEventListener('click', (e) => {
                if(e.target === projectSelectModal) closeProjectModal();
            });
            
            // 初始化显示
            updateDisplayText();
        })();
        
        // 抽屉交互
        const drawer=document.getElementById('userDrawer');
        const mask=document.getElementById('drawerMask');
        function openDrawer(){drawer.classList.add('open');mask.classList.add('open')}
        function closeDrawer(){drawer.classList.remove('open');mask.classList.remove('open')}
        document.getElementById('userBtn').addEventListener('click',openDrawer);
        document.getElementById('closePanel').addEventListener('click',closeDrawer);
        mask.addEventListener('click',closeDrawer);
        document.getElementById('userInfoBtn').addEventListener('click',()=>{closeDrawer();location.href='user-info.html'});
        document.getElementById('controlPanelBtn').addEventListener('click',()=>{closeDrawer();location.href='control-panel-demo.html'});
        document.getElementById('logoutBtn').addEventListener('click',()=>{localStorage.removeItem('currentUser');location.href='mobile-login-demo.html'})
        document.addEventListener('keydown',e=>{if(e.key==='Escape')closeDrawer()});
        
        // 修改密码功能
        const passwordModal = document.getElementById('passwordModal');
        const passwordForm = document.getElementById('passwordForm');
        
        function openPasswordModal() {
            passwordModal.classList.add('open');
            // 关闭个人信息抽屉
            closeDrawer();
        }
        
        function closePasswordModal() {
            passwordModal.classList.remove('open');
            // 清空表单和错误信息
            passwordForm.reset();
            clearPasswordErrors();
        }
        
        function clearPasswordErrors() {
            document.getElementById('currentPasswordError').textContent = '';
            document.getElementById('newPasswordError').textContent = '';
            document.getElementById('confirmPasswordError').textContent = '';
        }
        
        function showPasswordError(fieldId, message) {
            document.getElementById(fieldId + 'Error').textContent = message;
        }
        
        function validatePassword() {
            const currentPassword = document.getElementById('currentPassword').value;
            const newPassword = document.getElementById('newPassword').value;
            const confirmPassword = document.getElementById('confirmPassword').value;
            
            clearPasswordErrors();
            let isValid = true;
            
            // 验证当前密码（这里简化处理，实际应该与服务器验证）
            if (!currentPassword) {
                showPasswordError('currentPassword', '请输入当前密码');
                isValid = false;
            }
            
            // 验证新密码
            if (!newPassword) {
                showPasswordError('newPassword', '请输入新密码');
                isValid = false;
            } else if (newPassword.length < 6) {
                showPasswordError('newPassword', '密码长度至少6位');
                isValid = false;
            }
            
            // 验证确认密码
            if (!confirmPassword) {
                showPasswordError('confirmPassword', '请确认新密码');
                isValid = false;
            } else if (newPassword !== confirmPassword) {
                showPasswordError('confirmPassword', '两次输入的密码不一致');
                isValid = false;
            }
            
            return isValid;
        }
        
        // 事件监听
        document.getElementById('changePasswordBtn').addEventListener('click', openPasswordModal);
        document.getElementById('passwordClose').addEventListener('click', closePasswordModal);
        document.getElementById('passwordCancel').addEventListener('click', closePasswordModal);
        
        // 点击模态框背景关闭
        passwordModal.addEventListener('click', (e) => {
            if (e.target === passwordModal) {
                closePasswordModal();
            }
        });
        
        // 表单提交
        passwordForm.addEventListener('submit', (e) => {
            e.preventDefault();
            
            if (validatePassword()) {
                // 这里应该调用API修改密码
                alert('密码修改成功！');
                closePasswordModal();
            }
        });
        
        // Esc键关闭密码模态框
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape' && passwordModal.classList.contains('open')) {
                closePasswordModal();
            }
        });
        
        // 设备筛选功能
        function filterDevices() {
            const statusSelect = document.getElementById('deviceStatusSelect');
            const onlineSelect = document.getElementById('deviceOnlineSelect');
            const nameInput = document.getElementById('deviceNameInput');
            
            const selectedStatus = statusSelect.value;
            const selectedOnline = onlineSelect.value;
            const searchName = nameInput.value.toLowerCase();
            
            document.querySelectorAll('.device-card').forEach(card => {
                const deviceName = card.getAttribute('data-device-name').toLowerCase();
                const deviceOnline = card.getAttribute('data-online');
                const deviceStatus = card.getAttribute('data-status');
                const tagText = card.querySelector('.tag').textContent.trim();
                
                let showCard = true;
                
                // 按设备名称筛选
                if (searchName && !deviceName.includes(searchName)) {
                    showCard = false;
                }
                
                // 按在线状态筛选
                if (selectedOnline && deviceOnline !== selectedOnline) {
                    showCard = false;
                }
                
                // 按启用/禁用状态筛选
                if (selectedStatus) {
                    const statusMap = {
                        'normal': 'enabled',
                        'disabled': 'disabled'
                    };
                    if (deviceStatus !== statusMap[selectedStatus]) {
                        showCard = false;
                    }
                }
                
                card.style.display = showCard ? 'block' : 'none';
            });
        }
        
        // 切换设备启用/禁用状态
        function toggleDeviceStatus(card) {
            const currentStatus = card.getAttribute('data-status');
            const deviceName = card.getAttribute('data-device-name');
            const tag = card.querySelector('.tag');
            const button = card.querySelector('.btn-mini');
            
            if (currentStatus === 'enabled') {
                // 从启用切换到禁用
                card.setAttribute('data-status', 'disabled');
                tag.textContent = '禁用';
                tag.style.background = '#ffe9e6';
                tag.style.color = '#F56C6C';
                button.textContent = '启用';
                alert(`${deviceName} 已禁用`);
            } else {
                // 从禁用切换到启用
                card.setAttribute('data-status', 'enabled');
                const onlineStatus = card.getAttribute('data-online');
                if (onlineStatus === 'online') {
                    tag.textContent = '在线';
                    tag.style.background = '';
                    tag.style.color = '';
                } else {
                    tag.textContent = '离线';
                    tag.style.background = '#ffe9e6';
                    tag.style.color = '#F56C6C';
                }
                button.textContent = '禁用';
                alert(`${deviceName} 已启用`);
            }
        }
        
        // 绑定筛选事件
        document.getElementById('deviceStatusSelect').addEventListener('change', filterDevices);
        document.getElementById('deviceOnlineSelect').addEventListener('change', filterDevices);
        document.getElementById('deviceNameInput').addEventListener('input', filterDevices);
        
        // 设备卡片点击事件
        document.querySelectorAll('.device-card').forEach(card => {
            card.addEventListener('click', function(e) {
                // 如果点击的是启用/禁用按钮，处理状态切换
                if (e.target.classList.contains('btn-mini')) {
                    e.stopPropagation();
                    toggleDeviceStatus(this);
                    return;
                }
                
                const deviceId = this.getAttribute('data-device-id');
                const deviceName = this.getAttribute('data-device-name');
                
                // 将设备信息保存到localStorage
                const deviceInfo = {
                    id: deviceId,
                    name: deviceName,
                    timestamp: Date.now()
                };
                localStorage.setItem('selectedDevice', JSON.stringify(deviceInfo));
                
                // 跳转到设备详情页面
                window.location.href = 'device-detail.html';
            });
            
            // 添加鼠标悬停效果
            card.style.cursor = 'pointer';
            card.addEventListener('mouseenter', function() {
                this.style.transform = 'translateY(-2px)';
                this.style.boxShadow = '0 4px 12px rgba(0,0,0,.1)';
                this.style.transition = 'all 0.2s ease';
            });
            
            card.addEventListener('mouseleave', function() {
                this.style.transform = 'translateY(0)';
                this.style.boxShadow = '0 2px 6px rgba(0,0,0,.03)';
            });
        });
        
    </script>
</body>
</html>

